<template>
  <!-- dialog的显示与否是通过 :visible.sync的值来控制的 -->
<el-dialog title="添加菜单" :visible.sync="addMenuListDialogVisible" width="50%" :before-close="handleClose">
  <el-form :model="form" >
  <el-form-item label="数据类型">
    <el-radio-group v-model="form.radio">
    <el-radio label="1" v-model="form.radio">目录</el-radio>
    <el-radio label="2" v-model="form.radio">菜单</el-radio>
    <el-radio label="3" v-model="form.radio">按钮</el-radio>
    </el-radio-group>
  </el-form-item>

  <div v-show="form.radio =='1'" prop="title">
  <el-form-item label="目录标题" >
    <el-input v-model="form.title" placeholder="中文,例:系统管理" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="目录标识" prop="perms">
    <el-input v-model="form.perms" placeholder="英文:例:SystemManager" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="目录路径" prop="path">
    <el-input v-model="form.path" placeholder="例:/sys"></el-input>
  </el-form-item>
  <el-form-item label="排序编号" prop="orderNum">
  <el-input-number v-model="form.orderNum" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
  </el-form-item>
  <el-form-item label="目录图标" prop="icon">
    <el-input v-model="form.titl" placeholder="例:el-icon-top"></el-input>
  </el-form-item> 
</div>


<div v-show="form.radio =='2'" prop="title">
  <el-form-item label="菜单标题">
    <el-input v-model="form.title" placeholder="中文,例:用户管理"></el-input>
  </el-form-item>
  <el-form-item label="菜单标识" prop="perms">
    <el-input v-model="form.perms" placeholder="英文:例:user"></el-input>
  </el-form-item>
  <el-form-item label="上级菜单" prop="parentId">
    <el-select v-model="formInline.parentlist" placeholder="上级菜单">
      <el-option label="系统管理" value="shanghai"></el-option>
      <el-option label="使用案例" value="beijing"></el-option>
      <el-option label="系统监控" value="shanghai"></el-option>
      <el-option label="服务治理" value="beijing"></el-option>
      <el-option label="分类管理" value="shanghai"></el-option>
      <el-option label="规格管理" value="beijing"></el-option>
      <el-option label="SPU" value="shanghai"></el-option>
      <el-option label="SKU管理" value="beijing"></el-option>
      <el-option label="教学管理" value="shanghai"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label-width="45" label="是否隐藏菜单">
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
  </el-form-item>
  <el-form-item label="菜单路由" prop="path">
    <el-input v-model="form.path" placeholder="例:/sys/user"></el-input>
  </el-form-item>
  <el-form-item label="排序编号">
  <el-input-number v-model="form.orderNum" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
  </el-form-item>
  <el-form-item label="菜单图标" prop="icon">
    <el-input v-model="form.icon" placeholder="例:el-icon-top"></el-input>
  </el-form-item>
</div>

<div v-show="form.radio =='3'" >
  <el-form-item label="按钮名称" prop="type">
    <el-input v-model="form.type" placeholder="中文,例:编辑"></el-input>
  </el-form-item>
  <el-form-item label="上级菜单" prop="parentId">
    <el-select v-model="formInline.parentlist" placeholder="上级菜单">
      <el-option label="系统管理" value="shanghai"></el-option>
      <el-option label="使用案例" value="beijing"></el-option>
      <el-option label="系统监控" value="shanghai"></el-option>
      <el-option label="服务治理" value="beijing"></el-option>
      <el-option label="分类管理" value="shanghai"></el-option>
      <el-option label="规格管理" value="beijing"></el-option>
      <el-option label="SPU" value="shanghai"></el-option>
      <el-option label="SKU管理" value="beijing"></el-option>
      <el-option label="教学管理" value="shanghai"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="授权标识" prop="perms">
    <el-input v-model="form.perms" placeholder="例:sys:dept:add"></el-input>
  </el-form-item>
</div>
</el-form>
  
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeAndReset">取 消</el-button>
    <el-button type="primary" @click="addmenulist = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
// import axios from 'axios'
import http from '@/utils/request.js'

export default {
    data(){
        return{
          formInline: {
            parentlist: ''
        },
            addMenuListDialogVisible:false,//dialog表单默认隐藏
            radio: '1',
            value:true,//switch开关的默认状态//单选框的默认状态
            num: 0,//排序的默认状态
            form: {
                num:'',
                radio:'1',
                id:'',
                title:'',
                parentId:'',
                path:'',
                name:'',
                perms:'',
                type:'',
                icon:'',
                orderNum:''
            },
        }
    },
    methods: {
      // addmenulist(){
      //   this.$refs.addDialog.
      // },
      handleChange(value) {
        console.log(value);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        closeAndReset() {
            // 隐藏模态框
            this.addMenuListDialogVisible = false
            // 重置表单
            this.$refs.addForm.resetFields()
        }
      
    },
    

}
</script>

<style>

</style>
